<?php defined('IN_PHPCMS') or exit('No permission resources.'); ?><!DOCTYPE html>
<html lang="zh-cmn-Hans" class="wide wow-animation smoothscroll scrollTo">
  <head>
    <?php include template("layouts","header"); ?>
  </head>
  <body>
    <!-- Page-->
    <div class="page text-center">
      <!-- Page Header-->
      <header class="page-head">
        <?php include template("layouts","navbar"); ?>
      </header>
      <?php include template("layouts","breadcrumb"); ?>

      <!-- Page Content-->
      <main class="page-content section-top-98 section-sm-top-110">
        <section>
          <div class="shell">
            <div class="range range-xs-center">
              <div class="cell-sm-9 cell-md-8 cell-lg-12">
                <div class="range">
                  <!-- left -->
                  <div class="cell-lg-8 text-left">
                    <div class="order-form">
                      <h3 onclick="javascript:pollingOrder();">填写订单信息</h3>
                      <hr class="divider divider-lg bg-java hr-left-0 hr-sm-left-2">
                      <div class="offset-top-66">
                        <p>请认填写以下订单信息，以便我们核实以及安排快递。</p>
                      </div>
                      <div class="offset-top-34">
                        <form data-form-output="form-output-global" data-form-type="shop" method="post" action="?m=shop&c=shop&a=post&catid=<?php echo $catid;?>&id=<?php echo $id;?>" novalidate="novalidate" class="rd-mailform text-left">
                          <input type="hidden" name="ordersn" value="<?php echo $orderSN;?>">
                          <div class="range offset-top-0">
                            <div class="cell-sm-6">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-username" class="form-label form-label-outside text-dark rd-input-label">收货人</label>
                                <input id="contacts-username" type="text" name="username" data-constraints="@Required" class="form-control form-control-last-child">
                              </div>
                            </div>
                            <div class="cell-sm-6">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-phone" class="form-label form-label-outside text-dark rd-input-label">联系电话</label>
                                <input id="contacts-phone" type="text" name="phone" data-constraints="@IsNumeric @Required" class="form-control form-control-last-child">
                              </div>
                            </div>
                            <div class="cell-sm-8 offset-top-20">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-address" class="form-label form-label-outside text-dark rd-input-label">收货地址</label>
                                <input id="contacts-address" type="text" name="address" data-constraints="@Required" class="form-control form-control-last-child">
                              </div>
                            </div>
                            <div class="cell-sm-4 offset-top-20">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-code" class="form-label form-label-outside text-dark rd-input-label">邮编</label>
                                <input id="contacts-code" type="text" name="zipcode" class="form-control form-control-last-child">
                              </div>
                            </div>
                            <div class="cell-sm-8 offset-top-20">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-title" class="form-label form-label-outside text-dark rd-input-label">商品名</label>
                                <input id="contacts-title" type="text" name="goodsname" value="<?php echo $product['title'];?>" readonly class="form-control form-control-last-child">
                              </div>
                            </div>
                            <div class="cell-sm-4 offset-top-20">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-price" class="form-label form-label-outside text-dark rd-input-label">价格</label>
                                <input id="contacts-price" type="text" name="goodsprice" value="<?php echo $product['price'];?>" readonly class="form-control form-control-last-child">
                              </div>
                            </div>
                            <div class="cell-sm-12 offset-top-20">
                              <div class="form-group form-group-label-outside">
                                <label for="contacts-content" class="form-label form-label-outside text-dark rd-input-label">备注</label>
                                <textarea id="contacts-content" name="content" style="max-height: 70px;" class="form-control form-control-last-child"></textarea>
                              </div>
                            </div>
                          </div>
                          <div class="offset-top-18 offset-sm-top-24 text-center text-sm-left">
                            <button type="submit" style="min-width: 130px;" class="btn btn-ellipse btn-primary">提交订单</button>
                          </div>
                        </form>
                      </div>

                    </div>
                    <div class="order-table" style="display:none;">
                      <h3>确认订单信息</h3>
                      <hr class="divider divider-lg bg-java hr-left-0 hr-sm-left-2">
                      <div class="offset-top-66">
                        <p>请确认订单信息，如果有误请返回修改。</p>
                      </div>
                      <div class="offset-top-34">
                        <table data-responsive="true" class="table table-custom table-primary table-fixed">
                          <tr>
                            <th>#</th>
                            <th>项目</th>
                            <th>内容</th>
                          </tr>
                          <tr>
                            <td>1</td>
                            <td>收货人</td>
                            <td>1</td>
                          </tr>
                          <tr>
                            <td>2</td>
                            <td>联系电话</td>
                            <td>2</td>
                          </tr>
                          <tr>
                            <td>3</td>
                            <td>收货地址</td>
                            <td>3</td>
                          </tr>
                          <tr>
                            <td>4</td>
                            <td>邮编</td>
                            <td>4</td>
                          </tr>
                          <tr>
                            <td>5</td>
                            <td>商品名称</td>
                            <td>5</td>
                          </tr>
                          <tr>
                            <td>6</td>
                            <td>备注</td>
                            <td>6</td>
                          </tr>
                          <tr>
                            <td></td>
                            <td></td>
                            <td><h6 class="text-danger text-right">支付金额：¥<?php echo $product['price'];?></h6></td>
                          </tr>
                        </table>
                        <button type="button" style="min-width: 130px;" onclick="javascript:$('.order-form').show().siblings().hide();" class="btn btn-ellipse btn-primary">返回上页</button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a id="payment-qrcode" data-photo-swipe-item="" href="?m=shop&c=shop&a=qrcode&data=<?php echo $url;?>"
                        data-size="500x500" class="btn btn-ellipse btn-danger" style="min-width: 130px;" onclick="javascript:pollingOrder();">
                          立即支付
                        </a>
                      </div>
                    </div>
                    <div class="order-success" style="display:none;">
                      <h3>订单支付成功</h3>
                      <hr class="divider divider-lg bg-java hr-left-0 hr-sm-left-2">
                      <div class="offset-top-66">
                        <table data-responsive="true" class="table table-custom table-primary table-fixed">
                          <tr>
                            <th colspan="2">请牢记此订单号码，以备后续查询</th>
                          </tr>
                          <tr>
                            <td>订单号</td>
                            <td class="paymentSN" style="color:red;">12313123123</td>
                          </tr>
                          <tr>
                            <td>状态</td>
                            <td>已支付</td>
                          </tr>
                        </table>
                        <a href="<?php echo $CAT['url'];?>" class="btn btn-ellipse btn-icon btn-icon-left btn-java"><span class="icon mdi mdi-arrow-left-bold"></span>返回</a>
                        <!-- <button type="button" style="min-width: 130px;" class="btn btn-ellipse btn-primary" onclick="javascript:$('.order-form').show().siblings().hide();">返回</button> -->
                      </div>
                    </div>
                  </div>
                  <!-- right -->
                  <div class="cell-lg-4 text-left offset-top-66 offset-lg-top-0">
                    <div class="inset-lg-left-30">
                      <div>
                        <?php include template("layouts","product"); ?>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="offset-top-60">

          </div>
        </section>

      </main>
      <?php include template("layouts","footer"); ?>
    </div>
    <?php include template("layouts","global"); ?>
    <?php include template("layouts","javascript"); ?>
    <script>
      // 前台订单轮询
      function pollingOrder()
      {
        var i = 0;
        var sn = $("input[name='ordersn']").val();
        // 启动定时器，每5秒查询一次。成功：关闭电定时器、关闭弹窗、跳转成功视图、写入订单号。失败：判断是否到达指定次数
        var t1 = window.setInterval(function(){
          i++;
          $.post("?m=shop&c=shop&a=pollingOrder",{orderSN:sn},function(result){
            if (result == 1) {
              window.clearInterval(t1);
              $('.pswp__button--close').click();
              $('.paymentSN').text(sn);
              $('.order-success').show().siblings().hide();
            }
            else {
              console.log('输出：'+result+'查询失败'+i);
              if (i >= 150) {
                // 到达指定次数，关闭定时器、关闭二维码弹窗
                console.log('输出：关闭定时器');
                window.clearInterval(t1);
                $('.pswp__button--close').click();
              }
            }
          });
        },3000);
        // pollingOrder() end
      }
    </script>
  </body>
</html>
